<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合状态总览</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <style>
        body {
            background: #f5f7fa;
            margin: 0;
            font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }
        .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
        }
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding: 20px 0;
            border-bottom: 1px solid #ebeef5;
        }
        .header-left {
            flex: 1;
        }
        .page-title {
            margin: 0;
            font-size: 24px;
            color: #303133;
            font-weight: 600;
        }
        .header-right {
            display: flex;
            align-items: center;
        }
        .data-overview {
            margin-bottom: 20px;
        }
        .stats-row {
            margin-bottom: 30px;
        }
        .stats-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .stats-title {
            margin: 0;
            font-size: 16px;
            color: #303133;
            font-weight: 600;
        }
        .el-card {
            margin-bottom: 20px;
        }
        .stats-card {
            height: 108px;
        }
        .stats-card .icon {
            font-size: 48px;
            color: #409EFF;
        }
        .stats-card .data {
            text-align: right;
        }
        .stats-card .data h3 {
            font-size: 28px;
            margin: 0;
            color: #303133;
        }
        .stats-card .data p {
            margin: 0;
            color: #909399;
        }
        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .section-title-wrapper {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .section-title {
            margin: 0;
            font-size: 18px;
            color: #303133;
            font-weight: 600;
        }
        .section-note {
            font-size: 12px;
            color: #909399;
            background: #f5f7fa;
            padding: 4px 8px;
            border-radius: 4px;
        }
        .alarm-section {
            margin-top: 20px;
        }
        .alarm-distribution {
            padding: 10px;
        }
        .alarm-level-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            padding: 20px;
        }
        .alarm-level-item {
            display: flex;
            align-items: center;
            padding: 24px;
            border-radius: 12px;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .alarm-level-item:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 25px rgba(0,0,0,.15);
        }
        .alarm-level-item.urgent {
            background: linear-gradient(135deg, #ff6b6b, #ff5252);
            color: white;
            border: 2px solid #ff5252;
        }
        .alarm-level-item.important {
            background: linear-gradient(135deg, #ffa726, #ff9800);
            color: white;
            border: 2px solid #ff9800;
        }
        .alarm-level-item.normal {
            background: linear-gradient(135deg, #42a5f5, #2196f3);
            color: white;
            border: 2px solid #2196f3;
        }
        .alarm-level-item.warning {
            background: linear-gradient(135deg, #66bb6a, #4caf50);
            color: white;
            border: 2px solid #4caf50;
        }
        .level-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16px;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
        }
        .level-icon i {
            color: white;
            font-size: 24px;
        }
        .level-info {
            flex: 1;
        }
        .level-name {
            font-size: 16px;
            color: white;
            margin-bottom: 8px;
            font-weight: 600;
        }
        .level-count {
            font-size: 32px;
            font-weight: 700;
            color: white;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }
        .alarm-list-section {
            margin-top: 20px;
        }
        .refresh-timer {
            display: flex;
            align-items: center;
            color: #409eff;
            font-size: 14px;
        }
        .refresh-timer i {
            margin-right: 8px;
            animation: spin 2s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .alarm-list {
            max-height: 400px;
            overflow-y: auto;
        }
        .alarm-item {
            display: flex;
            align-items: center;
            padding: 16px 20px;
            border-bottom: 1px solid #ebeef5;
            transition: all 0.3s ease;
            cursor: pointer;
            border-radius: 8px;
            margin-bottom: 8px;
            background: #fff;
        }
        .alarm-item:hover {
            background: linear-gradient(135deg, #f8f9ff, #e8f4fd);
            transform: translateX(4px);
            box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
        }
        .alarm-item:last-child {
            border-bottom: none;
        }
        .alarm-time {
            font-size: 13px;
            color: #909399;
            margin-right: 20px;
            min-width: 100px;
            font-weight: 500;
        }
        .alarm-content {
            flex: 1;
            font-size: 15px;
            color: #303133;
            font-weight: 500;
        }
        .alarm-level-tag {
            margin-left: 16px;
            font-weight: 600;
        }
        .section-card {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.08);
            padding: 24px;
        }
        .section-content {
            margin-top: 20px;
        }
        .warning .icon {
            color: #e6a23c;
        }
        .danger .icon {
            color: #f56c6c;
        }
        .success .icon {
            color: #67c23a;
        }
        .custom-colors {
            --el-color-primary: #409eff;
        }
        @media (max-width: 768px) {
            .container {
                padding: 0 10px;
            }
            .alarm-level-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }
        }
    </style>
</head>
<body>
    <div id="status-overview-app">
        <div class="container">
            <!-- 页面头部筛选区域 -->
            <div class="page-header">
                <div class="header-left">
                    <h1 class="page-title">综合状态总览</h1>
                </div>
                <div class="header-right">
                    <el-select v-model="selectedProject" placeholder="请选择项目" style="width: 200px;" @change="onProjectChange">
                        <el-option
                            v-for="project in projectList"
                            :key="project.value"
                            :label="project.label"
                            :value="project.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <!-- 数据概览 -->
            <div class="data-overview">
                <!-- 第一行：基础状态数据 -->
                <div class="stats-row">
                    <div class="stats-header">
                        <h3 class="stats-title">系统状态概览</h3>
                        <div class="refresh-timer">
                            <i class='bx bx-refresh'></i>
                            <span>下次刷新: {{ statsCountdown }}s</span>
                        </div>
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-card shadow="hover" class="stats-card">
                                <el-row type="flex" align="middle">
                                    <el-col :span="12">
                                        <i class='bx bx-check-double icon'></i>
                                    </el-col>
                                    <el-col :span="12" class="data">
                                        <h3>98.2%</h3>
                                        <p>传感器在线率</p>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card shadow="hover" class="stats-card">
                                <el-row type="flex" align="middle">
                                    <el-col :span="12">
                                        <i class='bx bx-error icon warning'></i>
                                    </el-col>
                                    <el-col :span="12" class="data">
                                        <h3>15</h3>
                                        <p>今日告警</p>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card shadow="hover" class="stats-card">
                                <el-row type="flex" align="middle">
                                    <el-col :span="12">
                                        <i class='bx bx-wrench icon danger'></i>
                                    </el-col>
                                    <el-col :span="12" class="data">
                                        <h3>8</h3>
                                        <p>今日未处理告警</p>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card shadow="hover" class="stats-card">
                                <el-row type="flex" align="middle">
                                    <el-col :span="12">
                                        <i class='bx bx-broadcast icon'></i>
                                    </el-col>
                                    <el-col :span="12" class="data">
                                        <h3>96.8%</h3>
                                        <p>网关在线率</p>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>

                <!-- 第二行：任务统计数据 -->
                <div class="stats-row">
                    <div class="stats-header">
                        <h3 class="stats-title">任务执行统计</h3>
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-card shadow="hover" class="stats-card">
                                <el-row type="flex" align="middle">
                                    <el-col :span="12">
                                        <i class='bx bx-send icon'></i>
                                    </el-col>
                                    <el-col :span="12" class="data">
                                        <h3>{{ taskStats.sent }}</h3>
                                        <p>当天下发任务总数</p>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </el-col>
                        <el-col :span="12">
                            <el-card shadow="hover" class="stats-card">
                                <el-row type="flex" align="middle">
                                    <el-col :span="12">
                                        <i class='bx bx-check-circle icon success'></i>
                                    </el-col>
                                    <el-col :span="12" class="data">
                                        <h3>{{ taskStats.success }}</h3>
                                        <p>当天任务配置成功总数</p>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
            </div>


            <!-- 告警等级分布 -->
            <div class="section-card alarm-section">
                <div class="section-header">
                    <div class="section-title-wrapper">
                        <h3 class="section-title">告警等级分布</h3>
                        <span class="section-note">仅统计当天数据</span>
                    </div>
                    <div class="refresh-timer">
                        <i class='bx bx-refresh'></i>
                        <span>下次刷新: {{ alarmCountdown }}s</span>
                    </div>
                </div>
                <div class="section-content">
                    <div class="alarm-level-grid">
                        <div class="alarm-level-item urgent" @click="goToAlarmManagement">
                            <div class="level-icon">
                                <i class='bx bx-error-circle'></i>
                            </div>
                            <div class="level-info">
                                <div class="level-name">3级-紧急</div>
                                <div class="level-count">{{ alarmLevels.urgent }}</div>
                            </div>
                        </div>
                        <div class="alarm-level-item important" @click="goToAlarmManagement">
                            <div class="level-icon">
                                <i class='bx bx-error'></i>
                            </div>
                            <div class="level-info">
                                <div class="level-name">2级-重要</div>
                                <div class="level-count">{{ alarmLevels.important }}</div>
                            </div>
                        </div>
                        <div class="alarm-level-item normal" @click="goToAlarmManagement">
                            <div class="level-icon">
                                <i class='bx bx-info-circle'></i>
                            </div>
                            <div class="level-info">
                                <div class="level-name">1级-普通</div>
                                <div class="level-count">{{ alarmLevels.normal }}</div>
                            </div>
                        </div>
                        <div class="alarm-level-item warning" @click="goToAlarmManagement">
                            <div class="level-icon">
                                <i class='bx bx-message-rounded'></i>
                            </div>
                            <div class="level-info">
                                <div class="level-name">0级-预警</div>
                                <div class="level-count">{{ alarmLevels.warning }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 最新告警列表 -->
            <div class="section-card alarm-list-section">
                <div class="section-header">
                    <h3 class="section-title">最新告警列表</h3>
                    <div class="refresh-timer">
                        <i class='bx bx-refresh'></i>
                        <span>下次刷新: {{ countdown }}s</span>
                    </div>
                </div>
                <div class="section-content">
                    <div class="alarm-list">
                        <div class="alarm-item" 
                             v-for="alarm in alarmList" 
                             :key="alarm.id"
                             @click="goToAlarmDetail(alarm)"
                             @dblclick="goToAlarmDetail(alarm)">
                            <div class="alarm-time">{{ alarm.time }}</div>
                            <div class="alarm-content">{{ alarm.content }}</div>
                            <el-tag 
                                :type="getAlarmTagType(alarm.level)" 
                                size="small" 
                                class="alarm-level-tag">
                                {{ alarm.levelText }}
                            </el-tag>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#status-overview-app',
            data() {
                return {
                    countdown: 30, // 告警列表倒计时30秒
                    statsCountdown: 60, // 统计数据倒计时60秒
                    alarmCountdown: 300, // 告警等级分布倒计时300秒(5分钟)
                    statsTimer: null,
                    alarmTimer: null,
                    alarmListTimer: null,
                    selectedProject: 'all',
                    projectList: [
                        { value: 'all', label: '全部项目' },
                        { value: 'project1', label: '智慧园区A区' },
                        { value: 'project2', label: '智慧园区B区' },
                        { value: 'project3', label: '智慧园区C区' }
                    ],
                    taskStats: {
                        sent: 156,
                        success: 142
                    },
                    alarmLevels: {
                        urgent: 3,
                        important: 8,
                        normal: 12,
                        warning: 5
                    },
                    alarmList: [
                        {
                            id: 1,
                            time: '14:32',
                            content: '电梯运行状态监测',
                            level: 3,
                            levelText: '3级-紧急'
                        },
                        {
                            id: 2,
                            time: '14:28',
                            content: '配电室温度监测',
                            level: 2,
                            levelText: '2级-重要'
                        },
                        {
                            id: 3,
                            time: '14:25',
                            content: '水泵房压力监测',
                            level: 1,
                            levelText: '1级-普通'
                        },
                        {
                            id: 4,
                            time: '14:20',
                            content: '消防系统状态监测',
                            level: 0,
                            levelText: '0级-预警'
                        },
                        {
                            id: 5,
                            time: '14:15',
                            content: '照明系统状态监测',
                            level: 0,
                            levelText: '0级-预警'
                        }
                    ]
                }
            },
            methods: {
                // 获取告警标签类型
                getAlarmTagType(level) {
                    switch(level) {
                        case 3: return 'danger';
                        case 2: return 'warning';
                        case 1: return 'info';
                        case 0: return 'success';
                        default: return 'info';
                    }
                },
                // 跳转到告警管理页面
                goToAlarmManagement() {
                    // 这里可以跳转到告警管理页面
                    this.$message.info('跳转到告警管理页面');
                    // 实际项目中可以使用路由跳转
                    // this.$router.push('/alarm-management');
                },
                // 跳转到告警详情页面
                goToAlarmDetail(alarm) {
                    this.$message.info(`查看监测任务详情: ${alarm.content}`);
                    // 实际项目中可以跳转到告警详情页面
                    // this.$router.push(`/alarm-detail/${alarm.id}`);
                },
                // 刷新告警数据
                refreshAlarmData() {
                    // 模拟刷新数据
                    this.alarmList = this.generateRandomAlarms();
                    this.updateAlarmLevels();
                    this.$message.success('告警数据已刷新');
                },
                // 生成随机告警数据
                generateRandomAlarms() {
                    const taskNames = [
                        '电梯运行状态监测',
                        '配电室温度监测',
                        '水泵房压力监测',
                        '消防系统状态监测',
                        '照明系统状态监测',
                        'LORA网关信号监测',
                        '空调系统运行监测',
                        '门禁系统通信监测',
                        '监控摄像头状态监测',
                        'UPS电池状态监测',
                        '变压器温度监测',
                        '发电机运行监测',
                        '给水系统压力监测',
                        '排水系统液位监测',
                        '安防系统状态监测'
                    ];
                    
                    const levels = [0, 1, 2, 3];
                    const levelTexts = ['0级-预警', '1级-普通', '2级-重要', '3级-紧急'];
                    
                    return Array.from({ length: 5 }, (_, index) => {
                        const randomLevel = levels[Math.floor(Math.random() * levels.length)];
                        const randomTaskName = taskNames[Math.floor(Math.random() * taskNames.length)];
                        const now = new Date();
                        const time = new Date(now.getTime() - index * 300000); // 每5分钟一条
                        
                        return {
                            id: Date.now() + index,
                            time: time.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
                            content: randomTaskName,
                            level: randomLevel,
                            levelText: levelTexts[randomLevel]
                        };
                    });
                },
                // 更新告警等级统计
                updateAlarmLevels() {
                    const levels = { urgent: 0, important: 0, normal: 0, warning: 0 };
                    this.alarmList.forEach(alarm => {
                        switch(alarm.level) {
                            case 3: levels.urgent++; break;
                            case 2: levels.important++; break;
                            case 1: levels.normal++; break;
                            case 0: levels.warning++; break;
                        }
                    });
                    this.alarmLevels = levels;
                },
                // 开始统计数据倒计时
                startStatsCountdown() {
                    this.statsTimer = setInterval(() => {
                        this.statsCountdown--;
                        if (this.statsCountdown <= 0) {
                            this.refreshStatsData();
                            this.statsCountdown = 60;
                        }
                    }, 1000);
                },
                // 开始告警等级分布倒计时
                startAlarmCountdown() {
                    this.alarmTimer = setInterval(() => {
                        this.alarmCountdown--;
                        if (this.alarmCountdown <= 0) {
                            this.refreshAlarmLevels();
                            this.alarmCountdown = 300;
                        }
                    }, 1000);
                },
                // 开始告警列表倒计时
                startAlarmListCountdown() {
                    this.alarmListTimer = setInterval(() => {
                        this.countdown--;
                        if (this.countdown <= 0) {
                            this.refreshAlarmData();
                            this.countdown = 30;
                        }
                    }, 1000);
                },
                // 停止所有倒计时
                stopAllCountdowns() {
                    if (this.statsTimer) {
                        clearInterval(this.statsTimer);
                        this.statsTimer = null;
                    }
                    if (this.alarmTimer) {
                        clearInterval(this.alarmTimer);
                        this.alarmTimer = null;
                    }
                    if (this.alarmListTimer) {
                        clearInterval(this.alarmListTimer);
                        this.alarmListTimer = null;
                    }
                },
                // 刷新统计数据
                refreshStatsData() {
                    // 模拟刷新统计数据
                    this.taskStats = {
                        sent: Math.floor(Math.random() * 50) + 100,
                        success: Math.floor(Math.random() * 40) + 90
                    };
                    this.$message.success('统计数据已刷新');
                },
                // 刷新告警等级分布
                refreshAlarmLevels() {
                    // 模拟刷新告警等级分布
                    this.alarmLevels = {
                        urgent: Math.floor(Math.random() * 5),
                        important: Math.floor(Math.random() * 10) + 5,
                        normal: Math.floor(Math.random() * 15) + 8,
                        warning: Math.floor(Math.random() * 8) + 2
                    };
                    this.$message.success('告警等级分布已刷新');
                },
                // 项目筛选变化处理
                onProjectChange(projectValue) {
                    this.$message.info(`已切换到: ${this.getProjectName(projectValue)}`);
                    // 这里可以根据选择的项目刷新数据
                    this.refreshDataByProject(projectValue);
                },
                // 获取项目名称
                getProjectName(value) {
                    const project = this.projectList.find(p => p.value === value);
                    return project ? project.label : '未知项目';
                },
                // 根据项目刷新数据
                refreshDataByProject(projectValue) {
                    // 模拟根据项目筛选数据
                    if (projectValue === 'all') {
                        this.taskStats = { sent: 156, success: 142 };
                        this.alarmLevels = { urgent: 3, important: 8, normal: 12, warning: 5 };
                    } else {
                        // 模拟不同项目的数据
                        const projectData = {
                            project1: { taskStats: { sent: 78, success: 72 }, alarmLevels: { urgent: 1, important: 4, normal: 6, warning: 3 } },
                            project2: { taskStats: { sent: 45, success: 42 }, alarmLevels: { urgent: 2, important: 3, normal: 4, warning: 2 } },
                            project3: { taskStats: { sent: 33, success: 28 }, alarmLevels: { urgent: 0, important: 1, normal: 2, warning: 0 } }
                        };
                        const data = projectData[projectValue] || projectData.project1;
                        this.taskStats = data.taskStats;
                        this.alarmLevels = data.alarmLevels;
                    }
                }
            },
            mounted() {
                this.startStatsCountdown();
                this.startAlarmCountdown();
                this.startAlarmListCountdown();
            },
            beforeDestroy() {
                this.stopAllCountdowns();
            }
        });
    </script>
</body>
</html>
